<template>
  <div>
    <Title title="监控情况"></Title>
    <div class="top_item">
      <div class="nr" v-for="(item, index) in data" :key="index">
        <img :src="item.img" alt="" />
        <div class="nr_item">
          <div :style="{ color: '#ccc', fontSize: '12px' }">{{ item.floor }}</div>
          <div>设备数量：{{ item.equipmentNum }}</div>
          <div>
            正常设备：<b :style="{ color: 'green' }">{{ item.handclapNum }}</b
            ><span
              >故障设备：<b :style="{ color: 'red' }">{{ item.normalNum }}</b></span
            >
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import Title from '../../components/commont/Title.vue'
import { getjiank } from '../../request/index'
const data = ref([])
onMounted(() => {
  getjiank().then((res) => {
    console.log(res.data);
    data.value = res.data.data.result[0]
    // console.log(data)
  })
})
</script>

<style scoped lang="scss">
.top_item {
  font-size: 16px;
  margin-top: 10px;
  width: 100%;
  height: 260px;
  overflow: auto;
  color: #fff;
  background: #0c1d5f;
  -ms-overflow-style: none; // 隐藏 IE 和 Edge 的滚动条
  scrollbar-width: none; // 隐藏 Firefox 的滚动条
  .nr {
    background: #252c6c;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-bottom: 10px;
    img {
      width: 100px;
      height: 50px;
      margin: 15px;
    }
  }
}
</style>